<!--
 * @Description: Stay hungry,Stay foolish
 * @Author: Huccct
 * @Date: 2023-05-19 17:38:54
 * @LastEditors: Huccct
 * @LastEditTime: 2023-06-02 15:09:08
-->
<script setup lang="ts">
import { onMounted } from 'vue'

import useUserStore from '@/store/modules/user'
import { getTime } from '@/utils/time'

let userStore = useUserStore()
onMounted(() => {
  console.log(userStore.username,"names")
})

</script>
<template>
  <div class="home-bg">
    <el-card class="home-card">
      <div class="box">
        <img src="@/assets/images/logo.jpg" alt="" class="avatar" />
        <div class="footer">
          <h3 class="title">
            {{ getTime() }}
            <span class="gradient">{{ userStore.username }}</span>
          </h3>
          <p class="subtitle">Vue-Admin</p>
        </div>
      </div>
    </el-card>
    <div class="svg-divider"></div>
    <div class="bottom">
      <def-svg-icon name="welcome" width="600px" height="300px"></def-svg-icon>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.home-bg {
  min-height: 100vh;
  background: linear-gradient(135deg, #e0e7ff 0%, #f5f7fa 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 60px;
}
.home-card {
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(76, 110, 245, 0.10);
  padding: 40px 48px 32px 48px;
  background: rgba(255,255,255,0.95);
  min-width: 340px;
  max-width: 90vw;
  margin-bottom: 24px;
  animation: fadeInDown 0.8s;
}
.box {
  display: flex;
  align-items: center;
  .avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    box-shadow: 0 4px 24px rgba(76, 110, 245, 0.15);
    border: 4px solid #fff;
    transition: transform 0.3s;
    &:hover {
      transform: scale(1.06) rotate(-3deg);
    }
  }
  .footer {
    margin-left: 28px;
    margin-top: 10px;
    .title {
      font-size: 32px;
      margin-bottom: 18px;
      font-weight: 900;
      letter-spacing: 1px;
      .gradient {
        background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        font-size: 26px;
        font-weight: bold;
        margin-left: 6px;
      }
    }
    .subtitle {
      font-style: italic;
      color: #888;
      font-weight: 700;
      font-size: 18px;
      letter-spacing: 2px;
    }
  }
}
.svg-divider {
  width: 100%;
  max-width: 700px;
  height: 6px;
  margin: 30px 0 0 0;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  border-radius: 3px;
  opacity: 0.15;
}
.bottom {
  margin-top: 24px;
  display: flex;
  justify-content: center;
  width: 100%;
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 600px) {
  .home-card {
    padding: 24px 8px 18px 8px;
    min-width: 0;
  }
  .box {
    flex-direction: column;
    align-items: center;
    .footer {
      margin-left: 0;
      margin-top: 18px;
      .title {
        font-size: 22px;
        .gradient {
          font-size: 18px;
        }
      }
      .subtitle {
        font-size: 15px;
      }
    }
  }
  .svg-divider {
    margin: 18px 0 0 0;
  }
  .bottom {
    margin-top: 12px;
  }
}
</style>
